<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"> 

<h:head>
<h:outputStylesheet name="estilos-catalogos.css" library="css"></h:outputStylesheet>
<script type="text/javascript">
function llenarCampos()
{
	document.getElementById("formCiudad:txtCodigo").value=' ';
	document.getElementById("formCiudad:txtNombre").value=' ';
	
}

</script>
</h:head> 
<body>  
<h:form id="formCiudad">
<p:panel header="Ciudad">
<p:panelGrid columns="3" styleClass="gridCatalogos" >
<h:outputText value="Pa&#237;s" />
<h:selectOneMenu value="#{ciudadController.idPais}" id="listaPaises" >
<p:ajax event="change" update="txtPais, listaProvincias" listener="#{ciudadController.listaProv()}"></p:ajax>
<f:selectItems value="#{ciudadController.listaPaises}"></f:selectItems>
</h:selectOneMenu>
<h:inputText value="#{ciudadController.idPais}" id="txtPais" />
<h:outputText value="Provincia" />
<h:selectOneMenu value="#{ciudadController.idProvincia}" id="listaProvincias">
<p:ajax event="change" update="txtProvincia, listaProvincias" ></p:ajax>
<f:selectItems value="#{ciudadController.listaProvincias}"></f:selectItems>
</h:selectOneMenu>
<h:inputText value="#{ciudadController.idProvincia}" id="txtProvincia" />
<h:outputText value="C&#243;digo"  />
<p:inputText id="txtCodigo" value="#{ciudadController.codigoCiudad}" required="true" label="C&#243;digo" maxlength="3" requiredMessage="Favor ingrese un valor"/>
<p:message for="txtCodigo" id="msnCodigo"/>
<h:outputText value="Nombre" />
<p:inputText id="txtNombre" value="#{ciudadController.nombreCiudad}" required="true" label="Nombre" requiredMessage="Favor ingrese un Nombre"/>
<p:message for="txtNombre" id="msnNombre"/>
<h:outputText value="Estado" />
<h:selectOneMenu value="#{ciudadController.idEstadoCiudad}" id="listaEstados">
<f:selectItems value="#{ciudadController.listaEstado}"></f:selectItems>
</h:selectOneMenu>
</p:panelGrid>
<f:facet name="footer">
<p:commandButton id="btnAgregar" value="Agregar" action="#{ciudadController.guardarCiudad()}" update="@form"></p:commandButton>
</f:facet>
<f:facet name="footer">
<p:commandButton id="btnCancelar" value="Cancelar" action="#{ciudadController.cancelarCiudad()}" update="@form"></p:commandButton>
</f:facet>
</p:panel>
<p:messages id="mensajes" showDetail="true" globalOnly="true"></p:messages>
<p:dataTable id="tablaCiudad" value="#{ciudadController.listaCiudad}" var="ciudad" rowKey="#{ciudad.idCiudad}" rowIndexVar="row">
<p:column>
<f:facet name="header">#</f:facet>
<h:outputText value="#{row + 1}" />
</p:column>
<p:column>
<f:facet name="header">Pa&#237;s</f:facet>
#{ciudad.nombrePais}
</p:column>
<p:column >
<f:facet name="header">Provincia</f:facet>
#{ciudad.nombreProvincia}
</p:column>
<p:column sortBy="#{ciudad.codigoCiudad}">
<f:facet name="header">C&#243;digo</f:facet>
#{ciudad.codigoCiudad}
</p:column>
<p:column sortBy="#{ciudad.nombreCiudad}">
<f:facet name="header">Nombre</f:facet>
#{ciudad.nombreCiudad}
</p:column>
<p:column sortBy="#{ciudad.estadoCiudad}">
<f:facet name="header">Estado</f:facet>
#{ciudad.estadoCiudad == 'A'? "Activo":"Inactivo"}
</p:column>
<p:column headerText="Operaciones">
	<p:commandLink value="Editar" action="#{ciudadController.editarCiudad(ciudad.idCiudad)}" onclick="llenarCampos()" update="@form" ></p:commandLink>
</p:column>
</p:dataTable>
</h:form>
</body> 
</html>
